<template>
  <el-dialog
    :title="dialogProps.title"
    :visible.sync="dialogProps.visible"
    width="600px"
    v-loading="loading"
  >
    <el-form
      :model="MemberBa"
      :rules="formMember"
      label-width="80px"
      ref="MemberForm"
      label-position="right"
      size="small"
    >
      <el-tabs type="border-card">
        <el-tab-pane label="基本信息" class="user-info-tab-pane">
          <el-row>
            <el-col :span="12">
              <el-form-item label="档案号" prop="hFn">
                <el-input
                  :maxlength="32"
                  :disabled="dialogProps.action === 'edit' ? true : false"
                  v-model="MemberBa.hFn"
                  autofocus
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="身份证" prop="hNumber">
                <el-input v-model="MemberBa.hNumber" :maxlength="32"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="登录密码" prop="hPassword">
                <el-input
                  v-model="MemberBa.hPassword"
                  :maxlength="32"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="手机号" prop="hPhone">
                <el-input v-model="MemberBa.hPhone" :maxlength="32"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="姓名" prop="hName">
                <el-input v-model="MemberBa.hName" :maxlength="32"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="年龄" prop="hAge">
                <el-input
                  type="number"
                  min="1"
                  max="150"
                  v-model="MemberBa.hAge"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="性别" prop="hSex">
                <el-radio-group v-model="MemberBa.hSex" :maxlength="32">
                  <el-radio label="男"></el-radio>
                  <el-radio label="女"></el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="民族" prop="hNation">
                <el-input v-model="MemberBa.hNation" :maxlength="32"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="出生日期" prop="hDateofbirth">
                <el-date-picker
                  style="width: 184px"
                  v-model="MemberBa.hDateofbirth"
                  type="date"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd"
                  @change="getSTime"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="邮箱" prop="hMailbox">
                <el-input
                  v-model="MemberBa.hMailbox"
                  :maxlength="32"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="婚姻状态" prop="hMaritalstatus">
                <el-input
                  v-model="MemberBa.hMaritalstatus"
                  :maxlength="32"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="职业" prop="hOccupation">
                <el-input
                  v-model="MemberBa.hOccupation"
                  :maxlength="32"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="文化程度" prop="hStandard">
                <el-input
                  v-model="MemberBa.hStandard"
                  :maxlength="32"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item
                label-width="90px"
                label="健康管理师"
                prop="hThehealthmanager"
              >
                <el-input
                  v-model="MemberBa.hThehealthmanager"
                  :maxlength="32"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="档案状态" prop="hFilestatus">
                <el-switch
                  v-model="MemberBa.hFilestatus"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-value="1"
                  inactive-value="2"
                >
                </el-switch>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label-width="50px" label="备注" prop="hRemark">
                <el-input
                  class="properties-textarea"
                  type="textarea"
                  v-model="MemberBa.hRemark"
                  :rows="5"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="动态信息">
          <el-row>
            <el-col :span="6">
              <el-form-item label="身高(cm)" prop="hHeight">
                <el-input v-model="MemberBa.hHeight" :maxlength="32"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="体重(kg)" prop="hWeight">
                <el-input v-model="MemberBa.hWeight" :maxlength="32"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="舒张压" prop="hDiastolic">
                <el-input
                  v-model="MemberBa.hDiastolic"
                  :maxlength="32"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="收缩压" prop="hSystolic">
                <el-input
                  v-model="MemberBa.hSystolic"
                  :maxlength="32"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="呼吸" prop="hRespiratoryfrequency">
                <el-input
                  v-model="MemberBa.hRespiratoryfrequency"
                  :maxlength="32"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="体温" prop="hAnimalheat">
                <el-input
                  v-model="MemberBa.hAnimalheat"
                  :maxlength="32"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="腰围" prop="hWaistline">
                <el-input
                  v-model="MemberBa.hWaistline"
                  :maxlength="32"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="臀围" prop="hHipline">
                <el-input
                  v-model="MemberBa.hHipline"
                  :maxlength="32"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="BMI" prop="hBmi">
                <el-input v-model="MemberBa.hBmi" :maxlength="32"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label-width="100px"
                label="血氧饱和度%"
                prop="hOxyhemoglobin"
              >
                <el-input
                  v-model="MemberBa.hOxyhemoglobin"
                  :maxlength="32"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="病史">
          <el-row>
            <el-col :span="24">
              <el-form-item label="既往史" prop="hPrevious">
                <el-input
                  resize="none"
                  v-model="MemberBa.hPrevious"
                  type="textarea"
                  :maxlength="200"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="家族史" prop="hFamilyhistory">
                <el-input
                  resize="none"
                  v-model="MemberBa.hFamilyhistory"
                  type="textarea"
                  :maxlength="200"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="过敏史" prop="hAllergy">
                <el-input
                  resize="none"
                  v-model="MemberBa.hAllergy"
                  type="textarea"
                  :maxlength="200"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="病史" prop="hMedicalhistory">
                <el-input
                  resize="none"
                  v-model="MemberBa.hMedicalhistory"
                  type="textarea"
                  :maxlength="200"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="慢性病" prop="hChronicdisease">
                <el-input
                  resize="none"
                  v-model="MemberBa.hChronicdisease"
                  type="textarea"
                  :maxlength="200"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleDialogClose()">取 消</el-button>
      <el-button type="primary" size="small" @click="submitForm('MemberForm')"
        >确 定</el-button
      >
    </span>
  </el-dialog>
</template>
<script>
import { saveMember, updateMember } from "@/api/HMemberofthefile";
import {
  isPassword,
  validatePhone,
  validateEMail,
  validateIdNo,
  isOneToNinetyNine,
} from "@/utils/validate";

export default {
  name: "role-edit",
  data() {
    return {
      loading: false,
      dialogProps: {
        visible: false,
        action: "",
        title: "",
      },
      MemberBa: {
        hId: "",
        hFn: "",
        hName: "",
        hSex: "",
        hAge: "",
        hNumber: "",
        hPhone: "",
        hRegistration: "",
        hPassword: "",
        hNation: "",
        hDateofbirth: "",
        hMailbox: "",
        hMaritalstatus: "",
        hOccupation: "",
        hStandard: "",
        hThehealthmanager: "",
        hFilestatus: "",
        hRemark: "",
        hHeight: "",
        hWeight: "",
        hDiastolic: "",
        hSystolic: "",
        hRespiratoryfrequency: "",
        hAnimalheat: "",
        hWaistline: "",
        hHipline: "",
        hBmi: "",
        hOxyhemoglobin: "",
        hPrevious: "",
        hFamilyhistory: "",
        hAllergy: "",
        hMedicalhistory: "",
        hChronicdisease: "",
      },
      formMember: {
        hFn: [
          { required: true, message: "请输入档案号", trigger: "blur" },
          { validator: isPassword, trigger: "blur" },
        ],
        hName: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          { min: 2, max: 8, message: "长度在 2 到 12 个字符", trigger: "blur" },
        ],
        hAge: [
          { required: true, message: "请输入年龄", trigger: "blur" },
          {
            pattern: /^(1|[1-9]\d?|)$/,
            message: "请输入1-99",
            trigger: "blur",
          },
        ],
        hPhone: [
          { required: true, message: "请输入电话", trigger: "blur" },
          { validator: validatePhone, trigger: "blur" },
        ],
        hSex: [{ required: true, message: "请输入性别", trigger: "blur" }],
        hPassword: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { validator: isPassword, trigger: "blur" },
        ],
        // hMailbox: [
        //   { required: true, message: "请输入邮箱", trigger: "blur" },
        //   { validator: validateEMail, trigger: "blur" },
        // ],
        hNumber: [
          { required: true, message: "请输入身份证", trigger: "blur" },
          { validator: validateIdNo, trigger: "blur" },
        ],
        hThehealthmanager: [
          { required: true, message: "请输入健康管理师", trigger: "blur" },
          { min: 2, max: 8, message: "长度在 2 到 12 个字符", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    getSTime(val) {
      this.MemberBa.hDateofbirth = val;
    },
    //确定事件
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.dialogProps.action === "add") {
            this.doSaveMemberA();
          } else {
            this.doUpdateMember();
          }
        } else {
          return false;
        }
      });
    },
    //修改
    doUpdateMember() {
      this.loading = true;
      updateMember(this.MemberBa)
        .then((response) => {
          this.loading = false;
          this.dialogProps.visible = false;
          this.$emit("save-finished");
          this.$message({
            message: "修改成功",
            type: "success",
          });
        })
        .catch((error) => {
          this.outputError(error);
        });
    },
    //添加
    doSaveMemberA() {
      this.loading = true;
      saveMember(this.MemberBa)
        .then((response) => {
          this.loading = false;
          this.dialogProps.visible = false;
          this.$emit("save-finished");
          this.$message({
            message: "添加成功",
            type: "success",
          });
        })
        .catch((error) => {
          this.outputError(error);
        });
    },
    handleDialogClose() {
      this.dialogProps.visible = false;
    },
  },
  //修改&添加
  mounted: function () {
    this.$nextTick(() => {
      this.$on("opendEitMemberDialog", function (Member) {
        this.MemberBa = Member;
        this.dialogProps.action = "edit";
        this.dialogProps.title = "修改";
        this.dialogProps.visible = true;
      });
      this.$on("openAddMemberDialog", function () {
        this.MemberBa = { hSex: "男", hFilestatus: "1" };
        this.dialogProps.action = "add";
        this.dialogProps.title = "新增";
        this.dialogProps.visible = true;
      });
    });
  },
};
</script>

